<template>
   <div id="demo">

      <el-dialog
         :title="types+'线需知'"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
        <span>
             每次只能{{types}}线一个知识点，如果你点击的知识点有下级，将为你{{types}}线该知识点下的全部知识点，如果你只想单独{{types}}线该知识点下的某个知识点，请展开点击对应的知识点在{{types}}线
            <p style='color:red;'>你{{types}}线的知识点ID为{{id}}名称为【{{choseTitle}}】</p>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="agree">确 定</el-button>
        </span>
      </el-dialog>
       <div class="indedetail">
        <!--左边-->
         <div class="left">
           <div>
            <el-button-group style='display:flex'>
            <el-button type="primary" @click='onlineOrOfflines(1)'  size="mini">上线全部</el-button>
            <el-button type="primary" @click='onlineOrOfflines(0)'  size="mini">下线全部</el-button>
           </el-button-group>
           </div> 
          <!-- <el-tree
            :data="resourceData"
            :props="{children: 'children', hasChildren: 'hasChildren'}"
            :load="loadNode"
            lazy
            @check="ChangeTree"
            @node-click="checktab"
            show-checkbox>
           
            </el-tree>
            -->
             <div class="tree">      
            <el-tree :data="resourceData" node-key="id"   :props="{children: 'children', hasChildren: 'hasChildren'}"    :load="loadNode"  lazy
              @node-click="ChangeTree" ref="treeForm">
            </el-tree>
            </div>

         </div>

         <!--右边-->
         <div class="right">
           <div class="topbox">
              <p>知识点数：{{getstatisticsList.pointNum}}个 &nbsp;&nbsp; 编辑中：{{getstatisticsList.editorNum}}题&nbsp;&nbsp; 校验中：{{getstatisticsList.checkNum}}题 &nbsp;&nbsp;审核中：{{getstatisticsList.reviewNum}}题&nbsp;&nbsp; 已审核：{{getstatisticsList.completeReviewNum}}题&nbsp;&nbsp; 已抽检：{{getstatisticsList.qualifiedCompleteNum}}题</p>
           </div>
           <!--筛选-->
        
            <div class="demo-input-suffix">
              <el-form :inline="true"   size="mini" class="demo-form-inline">
              <!--题目-->
              <el-form-item label="题目">
                 <el-input v-model="title"  placeholder="请输入题目"></el-input>
              </el-form-item>
               <!--题目状态-->
              <el-form-item label="题目状态">
               <el-select v-model="questionStatus" placeholder="请选择"  >
                      <el-option
                        v-for="item in questionStatusData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                </el-select>
              </el-form-item>
               <!--题目类型-->
              <el-form-item label="题目类型">
              <el-select v-model="questionType" placeholder="请选择" >
                      <el-option
                        v-for="item in questionTypeData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                </el-select>
              </el-form-item>
               <el-form-item>
                <el-button type="primary"  size="mini" @click='onserch' >查询</el-button>
                <el-button size="mini"icon="el-icon-refresh-right" @click='regest' >重置</el-button>
              </el-form-item>
             </el-form>

          </div>
           
           <!---->
            <!--按钮-->
              <!--上线下线到处-->
              <div class='SJlogoout'>
                <el-button-group>
                  <el-button @click="allchat(1)" type="primary" size="mini" icon="el-icon-caret-top">上线</el-button>
                  <el-button @click="allchat(0)"  type="primary" size="mini"  icon="el-icon-caret-bottom">下线</el-button>
                </el-button-group>
              </div>

                     <!---->
               <el-row >
               <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  border
                  @selection-change="handleSelectionChange">
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    label="题目ID"
                    width="120">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                  </el-table-column>
                  <el-table-column
                    prop=""
                    label="题目"
                    width="120"
                    show-overflow-tooltip>
                     <template slot-scope="scope">{{ scope.row.title }}</template>
                  </el-table-column>
                  <el-table-column
                    prop=""
                    label="题目类型"
                    >
                     <template slot-scope="scope">
                      <span v-if="scope.row.type==1">单选题</span>
                      <span v-if="scope.row.type==2">多选题</span>
                      <span v-if="scope.row.type==3">判断题</span>
                      <span v-if="scope.row.type==4">情景题</span>
                      <span v-if="scope.row.type==5">简答题</span>
                      <span v-if="scope.row.type==6">辨析题</span>
                      <span v-if="scope.row.type==7">填空</span>
                      <span v-if="scope.row.type==8">完形填空</span>
                      <span v-if="scope.row.type==9">阅读理解</span>
                      <span v-if="scope.row.type==10">背景题</span>
                    </template>

                  </el-table-column>
                   <el-table-column
                    prop=""
                    label="难度"
                   >
                     <template slot-scope="scope">{{ scope.row.difficultyLevel }}分</template>
                   
                  </el-table-column>
                   <el-table-column
                    prop=""
                    label="创建时间"
                    >
                     <template slot-scope="scope">{{ scope.row.ctime  | dateFormat }}</template>
                  </el-table-column>
                    <el-table-column
                    prop=""
                    label="题目状态"
                   >
                    <template slot-scope="scope">
                      <el-tag type="info" v-if="scope.row.status==0">{{scope.row.editPeople}}-编辑中</el-tag>
                      <el-tag v-if="scope.row.status==1">上线</el-tag>
                      <el-tag type="danger" v-if="scope.row.status==2">下线</el-tag>
                      <el-tag  type="warning" v-if="scope.row.status==3">{{scope.row.checkPeople}}-校验中</el-tag>
                      <el-tag v-if="scope.row.status==4">{{scope.row.reviewPeople}}审核中</el-tag>
                      <el-tag type="success" v-if="scope.row.status==5">已审核</el-tag>
                    </template>
                   
                  </el-table-column>
                  <el-table-column
                      v-if="activeName==='1'"
                      class-name="status-col"
                      align="center"
                      label="编辑状态"
                      width="110px"
                    >
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.editStatus===0" type="info">暂存</el-tag>
                        <el-tag v-else-if="scope.row.editStatus===1" type="success">已提交</el-tag>
                        <el-tag v-else type="danger">驳回</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column
                      v-else-if="activeName==='2'"
                      class-name="status-col"
                      align="center"
                      label="校验状态"
                      width="110px"
                    >
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.checkStatus===0" type="info">暂存</el-tag>
                        <el-tag v-else-if="scope.row.checkStatus===1" type="success">已提交</el-tag>
                        <el-tag v-else type="danger">驳回</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column
                      v-else-if="activeName==='3'"
                      class-name="status-col"
                      align="center"
                      label="审核状态"
                      width="110px"
                    >
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.reviewStatus===0" type="info">暂存</el-tag>
                        <el-tag v-else-if="scope.row.reviewStatus===1" type="success">已提交</el-tag>
                        <el-tag v-else type="danger">驳回</el-tag>
                      </template>
                    </el-table-column>
                     <el-table-column align="center"
                      prop=""
                      label="上线状态"
                    >
                     <template slot-scope="scope">
                        <el-tag v-if="scope.row.onlineStatus===0" type="info">下线</el-tag>
                        <el-tag v-if="scope.row.onlineStatus===1" type="success">上线</el-tag>
                      
                      </template>
                    </el-table-column>
                   <el-table-column
                    prop="editPeople"
                    label="编辑人"
                   >
                  </el-table-column>
                   <el-table-column
                    prop="checkPeople"
                    label="检查人"
                    >
                  </el-table-column>
                   <el-table-column
                    prop="reviewPeople"
                    label="审核人"
                    >
                  </el-table-column>
                    <el-table-column
                    prop=""
                    label="查看"
                    >
                     <template slot-scope="scope">
                        <router-link
                        :to="{
                          path:'/questionInfo',
                          query:{
                            id:scope.row.id
                          }
                        }"
                      >
                        <el-button type="primary" size="mini">查看</el-button>
                      </router-link>
                     
                      </template>
                  </el-table-column>
                </el-table>
              </el-row> 

             <!---->

              <el-row class="page">
                  <el-pagination background layout="prev, pager, next" :total="totals"  :current-page.sync="pageNo"
                    :page-size="pageSize"  @current-change='currchange'></el-pagination>
              </el-row> 

              <!-- --> 
            </div>
         </div>
       </div>

    </div>
</template>

<script>
import { Loading } from 'element-ui';
import __Config from '../../api/config';//实际路径
export default {
  name: "indedetail",
 
  data() {
    return {
            id:this.$route.params.id,
            resourceData:[],

            title:"",//timu
            questionStatus:"",
            questionStatusData:[],//题⽬状态
            questionType:"",
            questionTypeData:[],//题⽬类型
            pageNo:1,
            pageSize:5,
            totals:null,
            tableData: [],
            getstatisticsList:[],

            multipleSelection: [],
            ids:[],//选择存放列表id
            centerDialogVisible:false,//弹出层
            choseID:'',//树结构选择ID
            choseTitle:"",//树结构选择标题
            types:"",//上 下
            choseType:"",// 0  1
            activeName:'1'
    }
    
  },

  created() {
        this.activeName = this.$store.getters.role === 1 ? "0" : "1";
    if (this.activeName === "1" && (this.$store.getters.permission & 1) <= 0) {
      this.activeName = "2";
    }
    if (this.activeName === "2" && (this.$store.getters.permission & 2) <= 0) {
      this.activeName = "3";
    }
   
      //alert(this.$route.params.id)
      this.getList();
      this.questionBankViewList();
      this.onserch();
      this.getstatisticsData();
  },
  methods: {
    onserch(){
            let options={
             background:"rgba(0, 0, 0, 0.8)",
             text:"加载中"
           }
           let loadingInstance = Loading.service(options);
           this.$axios({
              method:'get',
              url: __Config.api.getpage,
              headers: {
                "Content-Type":"application/json;",
                'Authorization': this.$store.getters.token//设置token 其中K名要和后端协调好
              },
              params:{
                    pageNo:this.pageNo,
                    pageSize:this.pageSize,
                    pointId:this.id,
                    title:this.title,
                    questionStatus:this.questionStatus,
                    questionType:this.questionType,
              },
              }).then((res)=>{
                   //console.log(res)
                   this.tableData = res.data.data;
                   this.totals = res.data.page.total;
                   loadingInstance.close();
              }).catch((err)=>{
                 loadingInstance.close();
                  console.log(err)
              })

        },
   //根据ID获取知识点
      getList(){
         
             this.$axios({
              method:'get',
              url: __Config.api.gettree,
              headers: {
                'Authorization':this.$store.getters.token,
              },
              params:{
                  parentId:this.id
              }
              }).then((res)=>{
                 //  console.log(res)
                   this.resourceData= res.data.data;
              }).then((err)=>{
                 // console.log(err)
              })
      },
    //懒加载
      loadNode(node, resolve) {
           if(node.data.isLeaf){
             this.$axios({
              method:'get',
              url: __Config.api.gettree,
              headers: {
                'Authorization':this.$store.getters.token,
              },
              params:{
                  parentId:node.data.id
              }
              }).then((res)=>{
                   resolve(res.data.data);
              }).then((err)=>{
                 // console.log(err)
              })
           
           }else{
              resolve([]);
           }

         },
        //查询条件
        questionBankViewList(){
             this.$axios({
              method:'get',
              url: __Config.api.questionBankView,
              headers: {
                'Authorization':this.$store.getters.token,
              },
              params:{ }
              }).then((res)=>{
                 this.questionStatusData= res.data.data.questionStatus;
                 this.questionTypeData= res.data.data.questionType;
              }).catch((err)=>{
                 // console.log(err)
              })
        },
        //点击树结构
        //  checktab(e){
        //      this.id = e.id;
        //      this.onserch();
        //      this.getstatisticsData();
        //  },
         //知识点统计
         getstatisticsData(){
         
            this.$axios({
              method:'get',
              url: __Config.api.getstatistics,
              headers: {
                'Authorization':this.$store.getters.token,
              },
              params:{
                pointId:this.id
              }
              }).then((res)=>{
                this.getstatisticsList= res.data.data;
                //  console.log(res)
              }).catch((err)=>{
                 // console.log(err)
              })
         },
         handleSelectionChange(val){
            // console.log(val)
             this.multipleSelection= val;
         },
         //分页
          currchange(e){
              this.pageNo=e;
              this.onserch();
          },
   
          //批量操作 onlineOrOffline
          allchat(type){ // 0 下线  1 上线
            this.ids=   this.multipleSelection.map(function(item) {
                 return item.id
                  
            })
             var arr= this.ids.toString();
             let idss = arr.replace(/\[|]/g,'');//移除字符串中的所有[]括号
            
             this.$axios({
              method:'post',
              url: __Config.api.onlineOrOffline,
              headers: {
                'Authorization':this.$store.getters.token,
              },
              params:{
                questionId:idss,
                type:type
              }
              }).then((res)=>{
               this.onserch();
               this.$message({
                message: res.data.msg,
                type: 'success'
              });
                  console.log(res)
              }).catch((err)=>{
                 this.$message({
                  message: err.response.data.msg,
                  type: 'warning'
                });
              })
          },
         //选择
         ChangeTree(val){
     
             this.id = val.id;
             this.choseTitle = val.title;
             this.onserch();
             this.getstatisticsData();
        },
        //全部上线下线
        onlineOrOfflines(type){
          this.choseType= type;
          if(type==0){
            this.types= "下"
          }else{
             this.types= "上"
          }
         this.centerDialogVisible=true;
        },
        //确定
        agree(){
          if(this.id==''){
              this.$message({
                  message: "至少选择一个知识点",
                  type: 'warning'
                });
              this.centerDialogVisible=false; 
          }else{
             let options={
              background:"rgba(0, 0, 0, 0.8)",
              text:"加载中"
           }
           let loadingInstance = Loading.service(options);
           this.$axios({
              method:'post',
              url: __Config.api.getzhishi,
              headers: {
                'Authorization':this.$store.getters.token,
              },
              params:{
                pointId:this.id,
                type:this.choseType
              }
              }).then((res)=>{
              
                this.id="";
                this.choseTitle="";
                
                this.centerDialogVisible=false; 
                loadingInstance.close();
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
            
              }).catch((err)=>{
                 
                  this.id="";
                  this.choseTitle="";
                   loadingInstance.close();
                  this.centerDialogVisible=false; 
                  this.$message({
                  message: err,
                  type: 'warning'
                });
              })

          }
        },

         regest(){
         this.title="";
         this.questionStatus="";
         this.questionType="";
         this.onserch();
       }
     
  }
};
</script>

<style scoped>
 .indedetail{
     width:95%;
     margin:20px auto;
     display:flex;
     min-height:500px;
 }
 .left{
     width:280px;
 }
 .right{
     flex:1;
     margin-left:20px;
 }
 .topbox{
   height:40px;
    font-size:14px;
   text-align: center;
   line-height: 40px;
 }
.demo-input-suffix{
  display:flex;
  height:40px;
  
}
.suffix{
   flex:1;
   display:flex;
   height:40px;
 
}
.suffix p:nth-child(1){
  height:40px;
  width:80px;
  line-height:40px;
  font-size:14px;
}
.SJlogoout{
  margin-top:40px;
}

</style>
